<!--  -->
<template>
  <div id="app">
    <!-- el-row 行
    le-col 列   默认情况将界面分成 24列 -->
    <!-- <el-row class="box">
      <el-col :span="8">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="8">
        <div class="bg-red"></div>
      </el-col>
      <el-col :span="8">
        <div class="bg-pink"></div>
      </el-col>
    </el-row> -->

    <!-- 有间隔的例子 -->
    <el-row :gutter="20">
          <el-col :span="6">
          <div class="bg-pink"></div>
        </el-col>
      <el-col :span="6">     
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="6">
        <div class="bg-red"></div>
      </el-col>
      <el-col :span="6">
        <div class="bg-pink"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
<style lang="less" scoped>
.bg-yellow {
  height: 100vh;
  width: 100%;

  background-color: yellow;
}
.bg-pink {
  height: 100vh;
  width: 100%;
  background-color: pink;
}
.bg-red {
  height: 100vh;
  width: 100%;
  background-color: red;
}
</style>
